<template>
  <div class="workspace web">
    <div class="cont">
      <div class="nav">
        <div class="nav-tabs">
          <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
            <!-- <el-tab-pane label="我的文件" name="myFiles"></el-tab-pane> -->
            <el-tab-pane label="授权的文件" name="authorize">
            </el-tab-pane>
          </el-tabs>
          <div class="tree-container">
            <!-- 树形组件 --><!--后期通用组件-->
            <el-tree :data="treeData" :props="defaultProps" :default-expanded-keys="defaultExpandedKeys"
              :expand-on-click-node="false" node-key="treeId" @node-click="handleNodeClick">
              <!-- @node-click="handleNodeClick" -->
              <template #default="{ node, data }">
                <div class="custom-tree-node">
                  <!-- @click="toggleChild(node)" -->
                  <div @click.stop="toggleChild(node)">
                    <span>
                      <!-- 没有子级所展示的图标 -->
                      <i v-if="!data.children" class=""></i>
                      <!-- 展开后的图标 -->
                      <i v-else-if="node.expanded">
                        <svg class="icon" aria-hidden="true">
                          <use xlink:href="#icon-file3_colour"></use>
                        </svg></i>
                      <!-- 未展开的图标 -->
                      <i v-else>
                        <svg class="icon" aria-hidden="true">
                          <use xlink:href="#icon-file2_colour"></use>
                        </svg>
                      </i>
                    </span>
                  </div>
                  <!-- 文件图标 -->
                  <div>
                    <span class="file-icon" v-if="data.type">
                      <template v-for="item in fileType">
                        <svg class="icon" aria-hidden="true" v-if="data.type === item.type">
                          <use :xlink:href="item.iconName"></use>
                        </svg>
                      </template>
                    </span>
                    <!-- 文件名 -->
                    <span class="file-name" style="margin-left:5px;">{{ data.label }}</span>
                  </div>

                  <!-- 操作按钮 data.auth 是否有操作权限按钮-->
                  <!-- <div class="node-actions" v-if="data.auth * 1 > 3"> -->
                  <div class="node-actions" v-if="data.auth * 1 >= 3 && data.label !== '暂无文件'">
                    <el-dropdown trigger="click">
                      <el-button link size="small">
                        <img src="@/assets/icon/moreFilled.svg" style="width: 15px;" />
                      </el-button>
                      <template #dropdown>
                        <el-dropdown-menu>
                          <!-- <el-dropdown-item v-if="!data.type">新建文件夹</el-dropdown-item> -->
                          <!-- <el-dropdown-item>重命名</el-dropdown-item> -->
                          <el-dropdown-item v-if="!data.type && data.auth * 1 >= 3">
                            <el-button link @click="openAuthorize(data)">授权</el-button>
                          </el-dropdown-item>
                          <el-dropdown-item v-if="data.type && data.auth * 1 >= 2">
                            <el-button link @click="download(data)">下载</el-button>
                          </el-dropdown-item>
                          <el-dropdown-item v-if="data.auth * 1 == 4">
                            <el-button link @click="projectDelete(selectedFileInfo)">删除</el-button>
                          </el-dropdown-item>
                        </el-dropdown-menu>
                      </template>
                    </el-dropdown>
                  </div>
                </div>
              </template>
            </el-tree>
          </div>
          <div class="add-file">
            <!-- 新增文件 -->
            <el-button v-if="weigh !== '1'" type="primary" style="border: none; width: 20px;height: 25px;" plain
              :icon="Plus" @click="addFile" />
          </div>
        </div>
        <!--
        <div class="resize">
          ...
        </div>
        <div class="dragg">
          <div class="operate">
            <h3> 共享</h3>
            <el-input v-model="filterText" placeholder="请输入" size="small">
              <template #prefix>
                <el-icon>
                  <Search />
                </el-icon>
              </template>
            </el-input>
          </div>
          <div class="tree-container">
            <el-tree :data="treeData2" :props="defaultProps" :default-expanded-keys="defaultExpandedKeys"
              :expand-on-click-node="false" node-key="treeId">
              <template #default="{ node, data }">
                <div class="custom-tree-node">
                  <div @click.stop="toggleChild2(node)">
                    <span>
                      <i v-if="!data.children" class=""></i>
                      <i v-else-if="node.expanded">
                        <svg class="icon" aria-hidden="true">
                          <use xlink:href="#icon-file3_colour"></use>
                        </svg></i>
                      <i v-else>
                        <svg class="icon" aria-hidden="true">
                          <use xlink:href="#icon-file2_colour"></use>
                        </svg>
                      </i>
                    </span>
                  </div>
                  <div>
                    <span class="file-icon" v-if="data.type">
                      <template v-for="item in fileType">
                        <svg class="icon" aria-hidden="true" v-if="data.type === item.type">
                          <use :xlink:href="item.iconName"></use>
                        </svg>
                      </template>
                    </span>
                    <span class="file-name" style="margin-left:5px;">{{ data.label }}</span>

                  </div>

                  <div class="node-actions" v-if="data.auth * 1 > 3">
                    <el-dropdown trigger="click">
                      <el-button link size="small">
                        <img src="@/assets/icon/moreFilled.svg" style="width: 15px;" />
                      </el-button>
                      <template #dropdown>
                        <el-dropdown-menu>
                          <el-dropdown-item>重命名</el-dropdown-item>
                          <el-dropdown-item>删除</el-dropdown-item>
                        </el-dropdown-menu>
                      </template>
                    </el-dropdown>
                  </div>
                </div>
              </template>
            </el-tree>
          </div>
        </div>-->
      </div>
      <div class="content">
        <div class="content-crumbs">
          <div class="crumbs-name">
            <!-- 返回按钮：仅当有父节点时显示 -->
            <el-icon v-if="currentParentNode" @click="handleBackToParent" style="cursor: pointer;">
              <ArrowLeftBold />
            </el-icon>
            <h3>{{ fileName }}</h3>
            <!-- <el-icon class="edit-pen">
              <EditPen />
            </el-icon> -->
          </div>
          <div class="crumbs-button">
            <!-- <el-button color="#337ECC" size="small" plain :disabled="auth < 3">
              <el-tooltip v-if="auth < 3" content="请联系管理员授权" placement="top">新建子文件夹</el-tooltip>
              <span v-else>新建子文件夹</span>
            </el-button> -->
            <el-button color="#337ECC" size="small" plain :disabled="filesListAuth * 1 < 4"
              @click="projectDelete(selectedFileInfo)">
              <el-tooltip v-if="filesListAuth * 1 < 4" content="请联系管理员授权" placement="top">
                删除</el-tooltip>
              <span v-else>删除</span>
            </el-button>
            <!-- <el-button color="#337ECC" size="small" plain>授权</el-button> -->
          </div>
        </div>
        <div class="content-box">
          <!-- 权限不足提示（非colour类型） -->
          <div v-if="filesListAuth * 1 < 2 && fileDisplay !== 'colour'" class="no-auth-tip">
            暂无权限查看,请联系管理员授权！！
          </div>

          <!-- 类型为colour时的内容展示 -->
          <template v-else-if="fileDisplay === 'colour'">
            <!-- 无实际文件时显示提示 -->
            <div v-if="shouldShowNoFile && filesListAuth * 1 < 3" class="no-file-tip">
              暂无文件
            </div>

            <!-- 有实际文件时显示文件列表 -->
            <FlieList v-else @refreshList="refreshList" :filesList="filesList" :filesListID="filesListID"
              @preview="handleNodeClick" :filesListAuth="filesListAuth" />
          </template>

          <!-- 其他文件类型预览（非colour且权限足够） -->
          <div v-else>
            <el-watermark :content="watermarkText">
              <FilePreview :file-type="fileDisplay" :file-path="filePath"
                :is-image="['jpg', 'png'].includes(fileDisplay)" />
            </el-watermark>
          </div>
        </div>
      </div>
      <!-- 弹窗 -->
      <el-dialog v-model="addFileDialog" title="新增文件夹" width="200">
        <el-input v-model="newFileName" placeholder="请输入文件夹名称"></el-input>
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="addFileDialog = false" size="small">取消</el-button>
            <el-button type="primary" @click="getProjectCreate" size="small">
              创建
            </el-button>
          </div>
        </template>
      </el-dialog>
      <el-dialog v-model="authorizeDialog" title="授权" width="450">
        <Authorize :folderData="folderData" />
        <template #footer>
          <div class="dialog-footer">
            <el-button @click="authorizeDialog = false" size="small" type="primary">确定</el-button>
          </div>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script setup>
import { Search, Plus, ArrowLeftBold } from '@element-plus/icons-vue'
import DragResize from '@/utils/dragg.js';
import FlieList from './FlieList.vue'
import Authorize from './Authorize.vue'
import api from "@/api/httpApi.js"
import { ElMessage, ElMessageBox } from 'element-plus'
import { useUserStore } from '@/api/store'
import { cancelAllPendingRequests } from "@/api/request.js"
import FilePreview from '@/components/FilePreview.vue';// 预览

// 存储当前页面所有未完成请求的取消函数
// const activeRequests = [];

const userStore = useUserStore()
userStore.refreshStore()//强制刷新数据
// 用户信息
const userInfo = computed(() => userStore.userInfo);

const weigh = ref('1')
const activeName = ref('authorize')
const newFileName = ref('')
const addFileDialog = ref(false)
const authorizeDialog = ref(false)
const filterText = ref('')//共享文件搜索
const filePath = ref('')//文件地址
// 授权文件夹信息
const folderData = ref({})
// 存储当前选中的文件对象（用于获取完整信息）
const selectedFileInfo = ref(null);
// 记录当前节点的父节点（用于返回）
const currentParentNode = ref(null);
// 文件显示类型
const fileDisplay = ref("colour");
// 文件类型
const fileType = ref([
  { type: 'colour', iconName: '#icon-file2_colour' },
  { type: 'doc', iconName: '#icon-word' },
  { type: 'docx', iconName: '#icon-word' },
  { type: 'xls', iconName: '#icon-EXCEL' },
  { type: 'xlsx', iconName: '#icon-EXCEL' },
  { type: 'pdf', iconName: '#icon-PDF' },
  { type: 'zip', iconName: '#icon-ZIP' },
  { type: 'rar', iconName: '#icon-RAR' },
  { type: 'txt', iconName: '#icon-TXT' },
  { type: 'jpg', iconName: '#icon-PICTURE' },
  { type: 'png', iconName: '#icon-PICTURE' },
  { type: 'video', iconName: '#icon-VIDEO' },
  { type: 'audio', iconName: '#icon-AUDIO' },
])
const fileName = ref('文件夹名称')
// 文件列表数据
const filesList = ref([])
// 文件列表id
const filesListID = ref()
// 文件夹权限
const filesListAuth = ref(1)
// 默认展开的节点 key 数组
const defaultExpandedKeys = ref([])
// 树形数据结构
const treeData = ref([])
const treeData2 = ref([
  {
    id: '#1',
    treeId: "#1",
    label: '广州中兴贸易有限公司',
    children: [
      {
        id: '#1-1',
        treeId: "#1-1",
        label: '万州食品商场',
        children: [{ label: "暂无文件", id: "#1-1-1" }]
      },
      {
        id: '1-2',
        treeId: "#1-2",
        label: '中旺物业',
        children: [{ label: "暂无文件", id: "#1-2-1" }]
      },
      {
        id: '1-3',
        treeId: "#1-3",
        label: '万州网络部',
        children: [{ label: "暂无文件", id: "#1-3-1" }]
      },
    ]
  },
])
// 水印显示
const watermarkText = computed(() => {
  let text = userInfo.value.staffname + "  " + userInfo.value.username
  return text
})
// “暂无文件”显示
const shouldShowNoFile = computed(() => {
  const currentNode = selectedFileInfo.value;
  // 未选中节点时显示提示
  if (!currentNode) {
    // console.log('[调试] 未选中任何节点 → 显示暂无文件');
    return true;
  }
  // console.log("[调试]currentNode.children", currentNode.children);

  // 非colour类型不处理（外层已过滤）
  if (currentNode.type !== 'colour') {
    if (Array.isArray(currentNode.children) && currentNode.children.length === 0) {
      return true;
    } else {
      if (currentNode.children) {
        // console.log('[调试] 节点类型非colour（类型：', currentNode.type, '）→ 不显示暂无文件');
        return false;
      } else {
        return true
      }
    }
  }

  // 处理colour类型的情况
  if (Array.isArray(currentNode.children) && currentNode.children.length === 0) {
    return true;
  } else if (currentNode?.children?.[0]?.label == "暂无文件") {
    return true;
  } else {
    // console.log('[调试] colour类型不显示暂无文件');
    return false;
  }
});

// 树形渲染参数配置
const defaultProps = {
  children: 'children',
  label: 'label',
}
// 树形展开收回点击事件
const toggleChild = (node) => {
  node.expanded = !node.expanded;
  fileName.value = node.data.label
  handleNodeClick(node.data)
};
// 树形展开收回点击事件
const toggleChild2 = (node) => {
  node.expanded = !node.expanded;
  fileName.value = node.data.label
};
// tabs点击事件
const handleClick = () => { };
const addFile = () => {
  newFileName.value = ''
  addFileDialog.value = true
}
// 处理树形节点点击事件
const handleNodeClick = async (data) => {
  filesListAuth.value = data.auth // 始终更新当前节点权限值
  if (data.id && !data.loaded && data.children?.length === 0) {
    // 获取子文件
    let childrenArray = await getFilesList(data.id);
    filesListAuth.value = data.auth//更新权限码

    if (childrenArray.length == 0) {
      data.children = [{ label: "暂无文件", id: "#" + data.id }]
    } else {
      data.children = childrenArray;
    }
    data.loaded = true; // 标记为已加载
  }
  if (data.label !== "暂无文件") {
    fileName.value = data.label
    if (data.type) {
      fileDisplay.value = data.type
      // 取消全局所有未完成的请求(切换树预览的时候)
      cancelAllPendingRequests();
      // 可预览的文件不是文件夹。是没有权限码的
      // filesListAuth.value = data.auth
      // 图片类型
      if (['jpg', 'png'].includes(data.type)) {
        ;
        filePath.value = data.filePathImg;
      } else {
        filePath.value = "";
        api.ResourceFile({ filepath: data.filePath }).then((res) => {
          // console.log("返回文件流", res);
          if (res instanceof Blob) {
            const mimeType = res.type || getFileMimeType(data.filePath); // 获取正确 MIME 类型
            filePath.value = URL.createObjectURL(new Blob([res], { type: mimeType }));
          } else {
            console.error("返回的不是有效的文件数据");
          }
        }).catch((err) => {
          // 显示错误图片
          fileDisplay.value = "png"
          filePath.value = "../../../public/test/error.png"
        })
        // filePath.value = data.filePath
        // filePath.value = "../../../public/test/测试表格.xlsx"
      }
    } else {
      fileDisplay.value = "colour"
      filesListID.value = data.id
      filesListAuth.value = data.auth//更新权限码
      // 取消全局所有未完成的请求(切换树预览的时候)
      cancelAllPendingRequests();
    }
  }

  // 记录当前选中文件信息时，也保存权限值
  selectedFileInfo.value = { ...data, auth: data.auth };
  // 记录当前节点的父节点（如果存在）
  if (data.parentId) {
    // String() 确保能匹配上
    // 从两棵树中查找父节点
    const parentInTree1 = findNodeById(treeData.value, String(data.parentId));
    const parentInTree2 = findNodeById(treeData2.value, String(data.parentId));
    // 取存在的节点
    currentParentNode.value = parentInTree1.node || parentInTree2.node;
  } else {
    currentParentNode.value = null; // 根节点无父节点
  }
};
// 返回父节
const handleBackToParent = () => {
  if (currentParentNode.value) {
    // 清理当前文件预览的 URL（避免残留）
    filePath.value = '';
    // 重新加载父节点的内容（触发父节点的子节点加载）
    handleNodeClick(currentParentNode.value);
    // 更新当前父节点为祖父节点（可选，用于连续返回，后续可能会用到，现在暂时只有一个子文件）
    if (currentParentNode.value?.parentId) {
      const parentInTree1 = findNodeById(treeData.value, currentParentNode.value.parentId);
      const parentInTree2 = findNodeById(treeData2.value, currentParentNode.value.parentId);
      currentParentNode.value = parentInTree1.node || parentInTree2.node;
    } else {
      currentParentNode.value = null; // 已回到根节点
    }
  }
};
// 刷新目录
const refreshList = async (i) => {
  const result = findNodeById(treeData.value, i);
  let arr = treeData.value[result.parentIndex]
  if (arr.children) {
    arr.children = await getFilesList(i);
    // 确保父节点权限值传递给子节点
    arr.children.forEach(child => {
      child.auth = arr.auth;
    });
    treeData.value[result.parentIndex] = arr
  }
  // console.log("refreshList", treeData.value);

  // treeData.value[result.parentIndex].children = getFilesList(i)
}
// 获取子目录
const getFilesList = async (parentId) => {
  if (userInfo.value?.id && parentId) {
    let obj = {
      proid: parentId,
      userid: userInfo.value.id,
    }
    let newDate = []
    await api.FilesList(obj).then((res) => {
      if (res.status === 1) {
        res.data.fileList.forEach(item => (
          newDate.push(
            {
              id: String(item.id), // 子节点 ID（假设接口返回 fileid）
              treeId: parentId + '#' + String(item.id),//树形唯一标识id
              label: item.filename,    // 子节点名称
              type: item.suffix, // 文件类型（根据扩展名）
              loaded: false,
              parentId: parentId,//父id
              filePath: item.path,//文件地址
              filePathImg: item.path_text,//文件地址
              // 添加权限值 - 从父节点继承
              auth: filesListAuth.value
            }
          )));
      }
    })
    return newDate
  }
}
// 创建文件夹
const getProjectCreate = () => {
  let data = {
    userid: userInfo.value.id,
    proname: newFileName.value
  }
  api.ProjectCreate(data).then((res) => {
    if (res.status == 1) {
      ElMessage.success(res.message)
      addFileDialog.value = false
      getProjectList()
    } else {
      ElMessage.error(res.message ? res.message : "未知错误,添加失败")
    }
  }).catch((error) => {
    console.log(error);
    ElMessage.error(error.message)
  })
}
// 文件下载
const download = (data) => {
  if (data.filePath) {
    let downloadPath = data.filePath
    let downloadName = data.label
    let downloadType = data.type
    api.ResourceFile({ filepath: downloadPath }).then((res) => {
      // console.log("返回文件流", res);
      // 处理文件流响应
      const blob = new Blob([res], { type: `application/${downloadType}` });
      // 创建临时下载链接
      const url = window.URL.createObjectURL(blob);
      const a = document.createElement('a');
      a.href = url;
      a.download = downloadName; // 设置下载文件名
      // 触发下载
      document.body.appendChild(a);
      a.click();
      document.body.removeChild(a); // 移除临时元素

      // 释放内存
      window.URL.revokeObjectURL(url);
    })
  }
}
// 文件授权
const openAuthorize = (data) => {
  folderData.value = data;
  authorizeDialog.value = true
}
// 获取文件夹
// 高权限auth>3 可修改删除
const getProjectList = async () => {
  await api.ProjectList({ userid: userInfo.value.id }).then((res) => {
    if (res.status == 1) {
      const transformedData = res.data.map(project => ({
        // 基础信息（根据后端返回字段调整）
        id: String(project.proid), // 转为字符串避免类型问题
        treeId: String(project.proid),//树形唯一标识id
        label: project.project.proname, // 文件夹名称
        auth: project.auth,
        createtime: project.project.createtime, // 创建时间（可选显示）
        children: [],
        loaded: false
      }));;
      treeData.value = transformedData; // 更新响应式数据
      // 默认展开第一项
      if (treeData.value.length > 0) {
        defaultExpandedKeys.value = [treeData.value[0].treeId];
        filesListAuth.value = transformedData?.[0].auth
        filesListID.value = transformedData?.[0].id;//更新右侧列表(默认获取第一项)
        // 模拟树形点击
        handleNodeClick(treeData.value[0])
        /*
        treeData.value[0].loaded = true;
        fileName.value = transformedData?.[0].label;
        // 子列表操作权限存储
        filesListAuth.value = transformedData?.[0].auth
        // 获取第一项的子文件
        getFilesList(transformedData?.[0].id).then(childrenArray => {
          treeData.value[0].children = childrenArray
        })*/
        // console.log('初始化树形', treeData.value);

        // 存储节点信息
        selectedFileInfo.value = treeData.value[0];
      }
    }
  })
}
// 根据 ID 查找树形节点
const findNodeById = (nodes, targetId) => {
  // 辅助函数，递归查找
  const findNode = (currentNodes, targetId, parentIndex) => {
    for (let i = 0; i < currentNodes.length; i++) {
      const currentNode = currentNodes[i];
      if (currentNode.id === targetId) {
        return { node: currentNode, parentIndex: i }; // 找到当前节点，返回节点和父索引
      }
      if (currentNode.children?.length) {
        // 递归查找子节点，当前子节点的父索引是i
        const result = findNode(currentNode.children, targetId, i);
        if (result.node) { // 如果找到，返回结果
          return result;
        }
      }
    }
    return { node: null, parentIndex: -1 }; // 未找到
  };

  // 从根节点开始查找，根节点的父索引是-1
  return findNode(nodes, targetId, -1);
};
// 删除文件
const projectDelete = (row) => {
  console.log("需要删除的数据", row);

  if (row?.children?.length > 0 && row.children[0].label !== "暂无文件") {
    ElMessage.error('文件夹为空的时候才能进行删除操作！！');
  } else {
    ElMessageBox.confirm(
      '确定删除该文件？', '提示',
      {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
      }
    )
      .then(async () => {
        if (row.type) {
          let data = {
            userid: userInfo.value.id,
            proid: Number(row.parentId),
            fileid: Number(row.id)
          }
          await api.FilesDelete(data).then((res) => {
            if (res.status == 1) {
              ElMessage.success(res.message)
              handleDeleteSuccess(row);
            } else {
              ElMessage.error(res.message);
            }

          })
        } else {
          let data = {
            userid: userInfo.value.id,
            proid: Number(row.id),
          }
          await api.ProjectDelete(data).then((res) => {
            ElMessage.success(res.message)
            handleDeleteSuccess(row);
          })
          console.log("删除文件夹");

        }
      })
  }

}
// 处理删除成功后的状态更新（合并刷新逻辑）
const handleDeleteSuccess = (deletedItem) => {
  const parentId = deletedItem.parentId;
  //刷新树节点
  if (parentId) {
    refreshList(String(parentId))
  } else {
    getProjectList()
  }
  //返回父节点并清理预览状态
  handleBackToParent();
};
// 文件类型映射
const getFileMimeType = (filePath) => {
  const ext = filePath.split('.').pop().toLowerCase();
  const mimeMap = {
    'doc': 'application/msword',
    'docx': 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
    'xls': 'application/vnd.ms-excel',
    'xlsx': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
    'pdf': 'application/pdf',
    'jpg': 'image/jpeg',
    'png': 'image/png',
  };
  return mimeMap[ext] || 'application/octet-stream'; // 默认二进制流
}
// const init = () => {
//   getProjectList()
// }
// 初始化
// init();
const vertical = DragResize
onMounted(() => {
  getProjectList()
  // 初始化拖拽
  vertical.init({
    // 改为垂直
    direction: 'vertical',
    minSize: 50,
    maxSize: 800,
    // 拖拽手柄类名
    resizeClass: 'resize',
    containerClass: 'nav',  // 容器类名
    leftClass: 'nav-tabs',  // 左侧/顶部区域类名
    rightClass: 'dragg',    // 右侧/底部区域类名
  });
  weigh.value = userInfo.value.rank.weigh
});
// 组件卸载时取消所有未完成请求
onUnmounted(() => {
  // 取消当前页面的所有请求
  // activeRequests.forEach((cancel) => cancel());
  // activeRequests.length = 0;

  // 取消全局所有未完成的请求
  cancelAllPendingRequests();
})
// watch(() => filesListAuth.value, (newVal) => {
//   console.log("[调试]权限值filesListAuth：", newVal);

// })
</script>

<style lang="scss" scoped>
@use "@/assets/scss/web.scss";

.workspace {

  .nav {
    height: calc(100vh - 60px);
    background-color: #fff;
    max-width: 50%;
    display: flex;
    flex-direction: column;
    border-right: 1px solid #dcdfe6;
    transition: width 0.5s ease;

    /* 添加tabs固定样式 */
    .nav-tabs {
      position: sticky;
      top: 0;
      z-index: 10;
      flex-shrink: 0;

      .el-tabs {
        height: auto;
        border: none;

        .el-tabs__header {
          margin-bottom: 0;
        }
      }
    }

    .tree-container {
      min-width: 240px;
      flex: 1;
      overflow-y: auto;
      width: 100%;

      // 自定义树节点样式
      .custom-tree-node {
        position: relative;
        width: 100%;
        display: flex;
        padding: 0 15px;
        min-height: 40px;
        align-items: center;
        position: relative;
        cursor: pointer;

        /* 确保文件名有足够的空间显示 */
        .file-name {
          white-space: nowrap;
          overflow: hidden;
          text-overflow: ellipsis;
          flex: 1;
          margin-right: 30px;
        }

        .node-actions {
          position: absolute;
          right: 15px;
          top: 50%;
          /* 垂直居中 */
          transform: translateY(-50%);
          /* 精确居中 */
        }
      }
    }

    .nav-tabs {
      flex: 1;
      display: flex;
      flex-direction: column;
      overflow-y: auto;
      position: relative;

      .add-file {
        position: absolute;
        right: 5px;
        top: 8px;
      }
    }

    .resize {
      height: 10px;
      line-height: 1px;
      text-align: center;
      width: 100%;
      cursor: row-resize;
      background-color: #f1f1f1;
      color: #646464;
    }

    .dragg {
      overflow-y: auto;

      .operate {
        padding: 15px;
        position: sticky;
        top: 0;
        z-index: 10;
        flex-shrink: 0;
        background-color: #fff;
      }

      h3 {
        font-size: 14px;
        margin-bottom: 8px;
      }
    }

  }

  .content {
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden;

    .content-crumbs {
      height: 40px;
      align-items: center;
      background-color: #fff;
      width: 100%;
      display: flex;
      border-bottom: 1px solid #dcdfe6;
      padding: 0 10px;
      box-sizing: border-box;
      justify-content: space-between;

      .crumbs-name {
        display: flex;
        align-items: center;

        h3 {
          margin: 0 5px;
        }

        .edit-pen {
          cursor: pointer;
        }
      }
    }

    .content-box {
      flex: 1;
      background-color: #fff;
      width: calc(100% - 30px);
      box-sizing: border-box;
      margin: 15px;
      border-radius: 8px;
      overflow: auto;
      padding: 10px;
    }
  }
}

// 操作下拉菜单样式
.el-dropdown-menu {
  border-radius: 4px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);

  .el-dropdown-menu__item {
    padding: 6px 16px; // 调整菜单项内边距
    font-size: 12px;

    &:hover {
      background-color: #ecf5ff; // 悬停背景色
    }
  }
}

// 树形自定义图标中隐藏自带箭头
:deep(.el-tree-node__content) {
  position: relative;
  height: 40px;
}

:deep(.el-tree-node__content > .el-tree-node__expand-icon) {
  position: absolute;
  opacity: 0;
}

// 修改tabs样式
:deep(.el-tabs) {
  height: 100%;
  border: none;

  .el-tabs__header {
    margin-bottom: 0;
  }

  .el-tabs__nav {
    padding-left: 15px;

    .el-tabs__item {
      height: 42px;
      line-height: 42px;
      margin-right: 20px;
      padding: 0;

      &.is-active {
        color: #000;
        font-weight: 600;

        &:after {
          background-color: #337ECC;
        }
      }
    }
  }

  .el-tab-pane__content {
    display: none;
  }
}

.no-auth-tip,
.no-file-tip {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  color: #999;
  font-size: 14px;
}

.no-file-tip {
  color: #666;
}
</style>